<script setup>

import Population from "@/components/DemographicCharacteristics/Population.vue";
import Map from "@/components/Map.vue";
import Gender from "@/components/DemographicCharacteristics/Gender.vue";
import Age from "@/components/DemographicCharacteristics/Age.vue";
import Rate from "@/components/DemographicCharacteristics/Rate.vue";
import HomeStruct from "@/components/DemographicCharacteristics/HomeStruct.vue";
</script>

<template>
<div class="population-main">
  <div class="top">
    <div class="side">
      <div class="item">
        <Gender></Gender>
      </div>
      <div class="item">
        <Age></Age>
      </div>
    </div>
    <div class="center">
      <Map></Map>
    </div>
    <div class="side">
      <div class="item">
        <Rate></Rate>
      </div>
      <div class="item">
        <HomeStruct></HomeStruct>
      </div>
    </div>
  </div>

  <div class="down">
    <population></population>
  </div>

</div>
</template>

<style scoped>
.population-main{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* 视口宽度单位 */
  height: 100vh; /* 视口高度单位 */
}

.top{
  display: flex;
  justify-content: space-between;
  height: 80%;
  width: 100%;
}
.down{
  height: 19.5%;
  width: 100%;
}

.side{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 25%;
}
.item{
  border: solid 1px black;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #2c3e50 ;
  height: 49.5%;
  width: 100%;
}

.center{
  height: 100%;
  width: 49%;
}


</style>